<template>
  <div class="Tabs">
    <!-- <h2>选项卡组件</h2> -->
    <div class="box">
      <div
        :class="activeStyle === index ? 'active' : ''"
        class="tabBox"
        v-for="(item, index) in list1"
        :key="index"
        @click="change(index)"
      ><!-- 选项卡标签 -->
        <a href="javascript:;">{{ item.name }}</a>
      </div>
    </div>
    <!-- 选项卡内容 -->
    <div class="content">{{ list1[activeStyle].content }}</div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      list1: [
        { name: "推荐1", content: "沦陷" },
        { name: "推荐2", content: "去年花开" },
        { name: "推荐3", content: "妈妈的话" },
        { name: "推荐4", content: "那里都是你" },
      ],
      list2: [
        { name: "精选", content: "精选" },
        { name: "歌手", content: "歌手" },
        { name: "排行", content: "paihang" },
        { name: "分类歌单", content: "Javascript" },
      ],
      list3: [
        { name: "推荐", content: "Java" },
        { name: "排行榜", content: "Phthon" },
        { name: "视频库", content: "PHP" },
        
      ],
      list4: [
        { name: "热门", content: "Java" },
        { name: "心情", content: "Phthon" },
        { name: "主题", content: "PHP" },
        { name: "场景", content: "Javascript" },
      ],
      list5: [
        { name: "歌曲", content: "Java" },
        { name: "歌单", content: "Phthon" },
        { name: "专辑", content: "PHP" },
        { name: "主题电台", content: "Javascript" },
        { name: "视频", content: "Javascript" },
      ],
      // list6: [
      //   { name: "歌曲", content: "1111" },
      //   { name: "视频", content: "2222" },
      // ],
      activeStyle: 0,
    };
  },
  methods: {
    change(value) {
      this.activeStyle = value;
      console.log(this._data.list);
    },
  },
  created() {
    let Listid =this.$route.query.id
    switch (Number(Listid)) {
      case 1:
        this.list1 = this.list1
        break;
      case 2:
        this.list1 = this.list2
        break;
      case 3:
        this.list1 = this.list3
        break;
      case 4:
        this.list1 = this.list4
        break;
      case 5:
        this.list1 = this.list5
        break;
      case 6:
        this.list1 = this.list6
        break;
      default:console.log( '最后'+Listid);
        break;
    }
  },
  
    
  
};
</script>

<style scoped>
.active {
  border-bottom: 3px solid orange;
}
.box {
  display: flex;
  justify-content: space-around;
}
.content {
  font-size: 50px;
  font-weight: bold;
  position: absolute;
  left: 50%;
  margin-left: -60px;
  top: 50%;
  margin-top: -100px;
  
}
</style>